<template>
  <div>
    <AppNavbar :fetchProductData="fetchData"/>
    <h2>{{ title }}</h2>
    <div class="brand-container">
      <div v-for="(brandGroup, groupIndex) in slicedBrands" :key="groupIndex" class="brand-group">
        <div v-for="(brandData, index) in brandGroup" :key="index" class="brand-card">
          <!-- 使用 <router-link> 包裹品牌图片 -->
          <router-link :to="{ name: 'list', params: { brand: brandData.name } }">
            <img :src="brandData.img || 'https://via.placeholder.com/250x150'" :alt="brandData.name" class="brand-image">
          </router-link>
          <div class="brand-title">{{ brandData.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import AppNavbar from '@/components/AppNavbar.vue';
  import {useRoute} from 'vue-router';
  import {computed, inject, onMounted, ref} from 'vue';
  import axios from 'axios';

  export default {
    components: {
      AppNavbar
    },
    setup() {
      const currentLocale = inject('locale'); // 假设在父组件或根实例中提供

      const i18nMessages = {
        'en': {
          title: 'Post Press',
        },
        'zh-CN': {
          title: '印后设备',
        },
      };
      const t = (key) => {
        console.log("key:",key,currentLocale.value)
        return i18nMessages[currentLocale.value][key] || key;
      };
      const title = computed(() => t('title'));

      const brands = ref([]);
      const route = useRoute();
      const type = route.params.menuItem;

      const fetchData = async () => {
        try {
          let nameField = 'name'; // 默认为中文名称字段
          if (currentLocale.value === 'en') {
            nameField = 'nameEn'; // 如果语言为英文，则使用英文名称字段
          }

          const response = await axios.get(process.env.VUE_APP_DOMAIN_URL + `/brand/brand/queryByType`, {
            params: { type: type }
          });

          if (response.data) {
            // 使用动态的名称字段来获取品牌名称
            brands.value = response.data.result.map(brand => ({
              ...brand,
              name: brand[nameField]
            }));
          }
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      };


      onMounted(() => {
        fetchData();
      });

      // 使用 computed 计算属性来每行显示三个品牌
      const slicedBrands = computed(() => {
        const result = [];
        for (let i = 0; i < brands.value.length; i += 3) {
          result.push(brands.value.slice(i, i + 3));
        }
        return result;
      });

      return { slicedBrands, t,title, fetchData };
    }
  };
</script>

<style scoped>
  .brand-container {
    padding: 20px;
  }

  .brand-group {
    display: flex; /* 将每个品牌组设置为水平布局 */
    flex-wrap: wrap; /* 换行 */
    margin-bottom: 20px; /* 控制每个品牌组之间的垂直间距 */
  }

  .brand-card {
    width: calc(30% - 20px); /* 让每个品牌卡片占据容器宽度的1/3，并减去外边距 */
    margin: 5px 20px; /* 控制品牌卡片之间的垂直间距 */
    position: relative; /* 使得品牌标题相对于品牌卡片定位 */
  }

  .brand-image {
    width: 100%; /* 让图片宽度充满品牌卡片 */
    height: 150px; /* 固定图片高度 */
    object-fit: cover; /* 保持图片比例并填充 */
    margin-bottom: 10px;
  }

  .brand-title {
    font-size: 18px;
    font-weight: bold;
    position: absolute; /* 相对于品牌卡片定位 */
    bottom: 10px; /* 距离品牌卡片底部的距离 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    background-color: rgba(255, 255, 255, 0.7); /* 设置背景色，增加可读性 */
    padding: 5px 10px; /* 增加内边距 */
    border-radius: 5px; /* 圆角 */
  }
</style>
